<template>
  <ly-panel class="page-manage" header="页面管理">
    <ul class="u-lst f-cb">
      <li
        v-for="(itm, idx) in pages"
        :keys="idx"
        :class="{ 'active': curPageId == itm.id }"
       @click="page_switch(itm.id)">
				<span class="order-idx">{{idx+1}}</span>
        <span>第{{ idx + 1 }}页</span>
        <el-dropdown class="f-fr" @command="handleCommand">
          <i class="el-icon-more"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="insert">新增页面</el-dropdown-item>
            <el-dropdown-item command="copy">复制页面</el-dropdown-item>
            <el-dropdown-item command="remove">删除页面</el-dropdown-item>
						<el-dropdown-item command="edit" class="page-set">页面设置</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </li>
    </ul>
    <el-button type="primary" @click="$store.dispatch('addNewPage')">新增页面</el-button>
  </ly-panel>
</template>

<script>
export default {
  name: 'PageManage',
  computed: {
    pages () {
      return this.$store.getters.pages
    },
    curPageId() {
        return this.$store.getters.curPageId
    }
  },
  methods: {
    handleCommand (command) {
      const pageId = this.curPageId
      const commandToAction = {
        insert: 'insertPage',
        copy: 'copyPage',
        remove: 'removePage',
        edit: 'openEditPage'
      }
      this.$store.dispatch(commandToAction[command], pageId)
    },
		// 页码进行切换时
		page_switch(id){
			this.$store.commit('CLOSE_PROPS_PANEL')
			 this.$store.commit('TOGGLE_PAGE', id)
		}
  },
  components: {
    lyPanel: () => import('@/layouts/ly-panel')
  }
}
</script>
<style lang="scss" scoped>
	@import "../assets/styles/variable.scss";

  .page-manage {
		border:1px solid $common_border_color;
		border-top:none;
		width:260px;
    .u-lst {
      > li {
				height:70px;
				line-height: 70px;
        padding:0 15px;
        border-bottom: 1px solid $main_border_color;
				font-size: 14px;
        color: $font_color;
        cursor: pointer;
				.order-idx{
					display:inline-block;
					width: 24px;
					height:24px;
					border-radius: 50%;
					background:#c0c4cc;
					text-align: center;
					line-height: 24px;
					color:#fff;
					margin-right:6px;
				}
        &.active {
          background-color: #dbdee6;
					.order-idx{
						background:$system_blue;
						
					}
        }
				.el-icon-more{
					color:#909399;
				}
      }
    }
		.el-button{
			width:230px;
			height:36px;
			line-height: 36px;
			font-size:14px;
			background:$system_blue;
			border:none;
			padding:0;
			border-radius:2px;
			margin-top:19px;
			margin-left: 15px;
			&:hover {
			  background: $hover_color;
			}
		}
		
		
// 		.el-dropdown-menu{
// 			border-radius:none;
// 		  .el-dropdown-menu__item{
// 				width:96px;
// 				height:36px;
// 				line-height: 36px;
// 			}
// 		}
  }
	.el-dropdown-menu{
		padding:0;
		border-radius:0;
		border:none;
		.el-dropdown-menu__item{
			width:96px;
			height:36px;
			text-align: center;
			line-height: 36px;
			color:#909399;
			&:hover{
				background:#849bfe;
				color:#fff;
			}
		}
		.page-set{border-top:1px solid #dbdee6;}
		
	}
	
	
</style>
